<template>
    <el-header>
        <div>
            欢 迎 使 用 题 库 管 理 系 统&nbsp;
        </div>
        <span style="color: #0d47a1;">若 在 使 用 过 程 中 发 现 bug,请 联 系 开 发 人 员YKX排 查,谢 谢
            <el-icon>
                <Clock />
            </el-icon>北 京 时 间：{{ now }} &nbsp;
        </span>
        <div>
            <span style="line-height: 40px;">
                <el-icon>
                    <User />
                </el-icon>
                欢迎{{ user.username }}回来 &nbsp; </span>
        </div>
        <el-dropdown>
            <el-avatar :size="40" :src="circleUrl" />
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>{{ user.role.roleName }}</el-dropdown-item>
                    <el-dropdown-item @click="handleUpdateImage">修改头像</el-dropdown-item>
                    <el-dropdown-item> <el-button type="danger" @click="handleExit" size="small">退出</el-button>
                    </el-dropdown-item>

                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-header>

    <el-dialog v-model="dialogImageVisible" title="上传头像">
        <el-upload class="avatar-uploader" action="/knowledge/upload/image" :limit="1" :accept="'image/*'"
            :on-success="handleAvatarSuccess" :data="data">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
    </el-dialog>

</template>
<script setup>
import {
    Clock,
    User,
    NoSmoking,
    UploadFilled,
    Plus
} from '@element-plus/icons-vue'
import { useUserStore } from '../../store/useUserStore';
import { useRouterStore } from '../../store/useRouterStore';
import { useRouter } from 'vue-router';
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'
const { changeUser, user } = useUserStore();
const { changeRouter } = useRouterStore();
const now = new Date().toLocaleString();
const router = useRouter();
const dialogImageVisible = ref(false)
const imageUrl = ref()
// let circleUrl = 'img/default.jpg'
let circleUrl = user.imageUrl == null ? 'img/default.jpg' : user.imageUrl;
const handleExit = () => {
    changeUser({});
    changeRouter(false);
    localStorage.removeItem("token")
    router.push("/login")
}

const handleUpdateImage = () => {
    dialogImageVisible.value = true
}

const data = {
    "token": localStorage.getItem("token"),
    "id": user.id
}

const handleAvatarSuccess = (response, file, fileList) => {
    ElMessage.success("头像修改成功")
    fileList.splice(fileList.indexOf(file), 1);
    console.log(response)
    imageUrl.value = response.data.url
    circleUrl = response.data.url
    dialogImageVisible.value = false;
}

</script>
<style lang="scss" scoped>
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0d47a1;
    color: white;
}
</style>
<style lang="scss" scoped>
.el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0d47a1;
    color: white;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}


.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>